<template>
	<view class="all">
		<view style="height: var(--status-bar-height);opacity: 0;">
			<!-- app状态栏高度占位 -->
		</view>
		<view class="">
			<u-navbar :title="status1?'编辑机构':'添加机构'" @rightClick="rightClick" :autoBack="true">
				<view class="u-nav-slot" slot="right" style="color: #5398F6;">
					保存
				</view>
			</u-navbar>
		</view>
		<view class="roomPic">
			<view class="title">
				机构图片<text style="font-size: 24rpx;color: #242424;">(最多上传6张)</text><text style="color: #E82828;">*</text>
			</view>
			<view class="upload">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="6" uploadIcon='plus' width="200rpx" height="170rpx"></u-upload>
			</view>
		</view>
		<view class="name">
			<view class="title">
				机构名称<text style="color: #E82828;">*</text>
			</view>
			<view class="content">
				<u--input :customStyle=test placeholder="请输入内容" border="surround"   v-model="form.institution_name"
					@blur="blur"></u--input>
			</view>
		</view>
		<u-picker :closeOnClickOverlay="true" :show="show" @close="closed" @cancel="cancel()"  keyName="label" :columns="columns" @confirm="confirm"></u-picker>
		<view class="types">
			<view class="title">
				机构性质<text style="color: #E82828;">*</text>
			</view>
			<view class="content" @click="showModel">
				<u--input :customStyle=test placeholder="请输入内容" readonly  border="surround" clearable v-model="form.institution_type"
					@blur="blur"></u--input>
			</view>
			<view class="right iconfont" style="float: right;">
				&nbsp;&#xe60d;
			</view>
		</view>
		<view class="adress">
			<view class="title">
				机构地址<text style="color: #E82828;">*</text>
			</view>
			<view class="content">
				<view class="input">
					<u--input :customStyle=test placeholder="请输入内容" border="surround" 
						v-model="form.institution_address"></u--input>
				</view>
				<view class="ads">
					<view class="" style="width: 28rpx;height: 28rpx;">
						<image style="width: 28rpx;height: 28rpx;" src="/static/img/location_icon_location.png" mode=""></image>
					</view>
					<view class="loc" @click="toLoc('洪洞县莲花城','洪洞县莲花城')">
						定位
					</view>
				</view>
			</view>
		</view>
		<view class="area">
			<view class="title">
				机构电话<text style="color: #E82828;">*</text>
			</view>
			<view class="content">
				<u--input :customStyle=test type='number' placeholder="请输入机构电话" border="surround" clearable
					v-model="form.institution_tel"></u--input>
			</view>
		</view>
		<view class="describe">
			<view class="title">
				机构介绍<text style="color: #E82828;">*</text>
			</view>
			<view class="content">
				<u--textarea border="none" v-model="form.institution_detail" autoHeight placeholder="请输入房间介绍"></u--textarea>
			</view>
		</view>
		<view class="tips">
			<view class="title">
				温馨提示
			</view>
			<view class="content">
				1.养老机构按照老人自愿入院的原则入住。<br>
				2.养老机构可能对老人提供流动服务与呼叫服务相结合。老人及子女若有增项服务，应该与院方协商，取得同意方可使用。<br>
				3.预约成功后，养老机构会收到您的预约信息，请等待工作人员与您联系。<br>
				4.预约成功后，欢迎您按预约时间前往养老院机构参观环境和现场查看房型。
			</view>
		</view>
		<view class="" style="height: 100rpx;"></view>
	</view>
</template>

<script>
	import {addInstitution,getInstitution,upInstitution} from '@/utils/api.js'
	export default {
		data() {
			return {
				show:false,
				columns: [
				    [{
				        label: '民办',
				        // 其他属性值
				        id: 1
				        // ...
				    }, {
				        label: '公办',
				        id: 2
				    }]
				],
				test: {
					height: '100%',
					padding: '0 0 0 0',
					border: 'none'
				},
				fileList1: [],
				urlArr:[],
				form: {
					institution_name: '',
					institution_address: '',
					institution_type:'',
					institution_detail: '',
					institution_tel: ''
				},
				pageDate:{},
				latitude: '',
				longitude: '',
				orgName:'',
				status1:false
			};
		},
		onLoad(option) {
			console.log(option.id,'option');
			
			if(option.id==2){
				this.status1=true
				getInstitution().then((res)=>{
					console.log(666);
					if(res.data.meta.status==200){
						this.form.institution_name=res.data.data.institution_name
						this.form.institution_address=res.data.data.institution_address
						this.form.institution_type=res.data.data.institution_type
						this.form.institution_detail=res.data.data.institution_detail
						this.form.institution_tel=res.data.data.institution_tel
						//url回显
						res.data.data.institution_img.forEach((item)=>{
							this.fileList1.push({url:item})
						})
						
						this.urlArr	=res.data.data.institution_img
					}
				})
			}
			else{
				const orgName=uni.getStorageSync('xddtest')
				try{
					if(orgName){
						this.form.institution_name=orgName
					}
				}catch(e){
					//TODO handle the exception
				}
			}
			
		},
		onShow() {
			const locoation=uni.getStorageSync('locoation')
			try{
				if(locoation){
					this.form.institution_address=locoation
				}
			}catch(e){
				//TODO handle the exception
			}
		},
		mounted() {
			
		},
		methods: {
			showModel(){
				this.show=true
			},
			cancel(){
				this.show=false
			},
			closed(){
				this.show=false
			},
			confirm(e){
				console.log(e,'eeeeeee');
				this.form.institution_type=e.value[0].label
				this.show=false
			},
			getlocation() {
				uni.getLocation({
					type: "gcj02",
					geocode: true,
					isHighAccuracy: true,
					success: (res) => {
						console.log(res,'ssssssssssssss');
						this.latitude=res.latitude.toString()
						this.longitude=res.longitude.toString()
						this.orgName=res.address.city+res.address.district+res.address.street+res.address.streetNum
						let data={
							la:this.longitude,
							lo:this.latitude,
							name:this.orgName,
							cityName:res.address.city
						}
						console.log(this.orgName,'this.orgName');
						uni.navigateTo({
							url:"/pages/my/organization/location?data="+ encodeURIComponent(JSON.stringify(data))
						})
					}
				})
			},
			toLoc(){
				this.getlocation()
			},
			blur() {
				this.form.name = this.form.name + '/月'
			},
			rightClick() {
				if(!this.urlArr.length){
					uni.showToast({
						title:'请上传房间图片！',
						icon:'none'
					})
					return
				}
				if(!this.form.institution_name){
					uni.showToast({
						title:'请输入房间名称！',
						icon:'none'
					})
					return
				}
				if(!this.form.institution_type){
					uni.showToast({
						title:'请选择机构性质！',
						icon:'none'
					})
					return
				}
				if(!this.form.institution_address){
					uni.showToast({
						title:'请输入机构地址！',
						icon:'none'
					})
					return
				}
				if(!this.form.institution_tel){
					uni.showToast({
						title:'请输入机构电话！',
						icon:'none'
					})
					return
				}
				if(!this.form.institution_detail){
					uni.showToast({
						title:'请输入机构介绍！',
						icon:'none'
					})
					return
				}
				this.form.institution_img=this.urlArr
				let parms=this.form
				if(parms.institution_type=='民办'){
					parms.institution_type=1
				}
				if(parms.institution_type=='公办'){
					parms.institution_type=2
				}
				if(this.status1){
					upInstitution(parms).then((res)=>{
						console.log(res,'/////////');
						if(res.data.meta.status==200){
							uni.showToast({
								title:'添加成功！',
								icon:'success'
							})
							try {
								uni.removeStorageSync('locoation');
							} catch (e) {
								// error
							}
							setTimeout(()=>{
								uni.redirectTo({
									url:'/pages/my/organization/organization'
								})
							},1000)
						}
						else{
							
						}
					})
				}
				else{
					addInstitution(parms).then((res)=>{
						console.log(res,'/////////');
						if(res.data.meta.status==200){
							uni.showToast({
								title:'添加成功！',
								icon:'success'
							})
							setTimeout(()=>{
								uni.redirectTo({
									url:'/pages/my/organization/organization'
								})
							},1000)
						}
						else{
							
						}
					})
				}
			},
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				console.log(this.fileList1,'？？？？？？');
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url:'https://www.ghhlkj.com/api/saveFile',
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							console.log(JSON.parse(res.data),'sssssssssss');
							this.urlArr.push(JSON.parse(res.data).url)
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.urlArr.splice(event.index, 1)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.all {
		background-color: #ffffff;

		.roomPic {
			margin-top: 44px;
			padding: 40rpx 24rpx;

			.title {
				font-weight: bold;
			}

			.upload {
				margin-top: 40rpx;
			}
		}

		.name,
		.adress,
		.area,
		.types,
		.amount {
			display: flex;
			padding: 0 24rpx;
			height: 100rpx;
			line-height: 100rpx;
			border-top: 1rpx solid #fbfbfb;

			.title {
				flex: 1;
				font-size: 32rpx;
				font-weight: bold;
				color: #242424;
			}

			.content {
				flex: 2.5;
				font-size: 32rpx;
				font-weight: bold;
				color: #242424;

			}
		}
		.adress{
			.content{
				padding-right:24rpx;
				display:flex;
				justify-content: space-between;
			}
			.ads{
				display: flex;
				.loc{
					font-size: 28rpx;
					font-weight: 500;
					color: #5398F6;
					margin-left: 5rpx;
				}
			}
		}
		.describe,
		.tips {
			.title {
				height: 100rpx;
				line-height: 100rpx;
				padding: 0 24rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #242424;
			}

			.content {
				padding: 0 24rpx;
				font-size: 26rpx;
				font-weight: bold;
				color: #484848;
				line-height: 60rpx;
			}
		}

	}
</style>